<template>
  <a-modal
    width="1100px"
    v-model:visible="visible"
    :on-before-ok="loadTable"
    :align-center="false"
    top="50px"
    unmount-on-close
  >
    <template #title>装载数据表</template>
    <a-alert class="mb-3" closable>载入表时，需要注意表名称的规范; 如果thinkorm配置了多个数据源, 可以进行切换</a-alert>
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef" @selection-change="handlerSelection">
      <template #tableButtons>
        <a-input-group>
          <a-select placeholder="切换数据源" v-model="sourceName" :options="dataSourceList" style="width: 300px" />
          <a-button type="primary" @click="switchSource">确定切换</a-button>
        </a-input-group>
      </template>

      <template #new_name="{ record }">
        <a-input-group>
          <a-input v-model="newName[record.name]" />
          <a-tooltip content="复制表名称到新名称">
            <a-link @click="() => (newName[record.name] = record.name)"><icon-copy /></a-link>
          </a-tooltip>
        </a-input-group>
      </template>
      <template #new_comment="{ record }">
        <a-input-group>
          <a-input v-model="newComment[record.name]" />
          <a-tooltip content="复制表注释到新注释">
            <a-link @click="() => (newComment[record.name] = record.comment)"><icon-copy /></a-link>
          </a-tooltip>
        </a-input-group>
      </template>
    </ma-crud>
  </a-modal>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue"
import dataMaintain from "@/api/system/dataMaintain"
import generate from "@/api/setting/generate"
import { Message } from "@arco-design/web-vue"

const crudRef = ref()
const selecteds = ref([])
const visible = ref(false)
const sourceName = ref("mysql")
const newName = ref({})
const newComment = ref({})
const emit = defineEmits(["success"])

const dataSourceList = ref([])

const switchSource = () => {
  crud.api = dataMaintain.getPageList
  crudRef.value.requestData()
}

const loadTable = async (done) => {
  if (selecteds.value.length < 1) {
    Message.info("至少要选择一条数据")
    done(false)
    return
  }
  const names = []
  crudRef.value.getTableData().filter((item) => {
    if (selecteds.value.includes(item.name)) {
      names.push({
        name: item.name,
        comment: item.comment,
        sourceName: item.name
      })
    }
  })
  names.map((item) => {
    if (newComment.value[item.sourceName]) {
      item.comment = newComment.value[item.sourceName]
    }
    if (newName.value[item.name]) {
      item.name = newName.value[item.name]
    }
  })
  const response = await generate.loadTable({
    source: sourceName.value,
    names
  })
  emit("success", response.code === 200)
  selecteds.value = []
  done(true)
}

const handlerSelection = (name) => (selecteds.value = name)

const open = () => {
  visible.value = true
  dataMaintain.getDataSource().then((response) => {
    dataSourceList.value = response.data.map((item) => {
      return { label: item, value: item }
    })
    sourceName.value = dataSourceList.value[0] ? dataSourceList.value[0].value : ""
  })
  nextTick(() => {
    switchSource()
  })
}

const crud = reactive({
  pk: "name",
  autoRequest: false,
  searchColNumber: 1,
  api: dataMaintain.getPageList,
  beforeRequest: (param) => {
    param.source = sourceName.value
  },
  showIndex: true,
  rowSelection: { showCheckedAll: true, key: "name", onlyCurrent: true }
})

const columns = reactive([
  { title: "表名称", dataIndex: "name", search: true, width: 200 },
  { title: "新名称", dataIndex: "new_name", hide: true, width: 200 },
  { title: "表注释", dataIndex: "comment", width: 180 },
  { title: "新注释", dataIndex: "new_comment", hide: true, width: 180 },
  { title: "创建时间", dataIndex: "create_time", width: 180 }
])

defineExpose({ open })
</script>
